import React, { Component } from 'react';
import { NavLink, Link, withRouter } from "react-router-dom"
import { createFromIconfontCN } from '@ant-design/icons';

import "./tabbar.css"

interface Props {
    history: any,
    location: any,
    match: any
}

interface State {
    tabbarlist: TabbarItem[],
    count: number
}
interface TabbarItem {
    icon: string,
    title: string,
    to: string
}

const IconFont = createFromIconfontCN({
    scriptUrl: [
        '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // icon-javascript, icon-java, icon-shoppingcart (overrided)
        '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python
        '//at.alicdn.com/t/c/font_3589961_d1xmede95kh.js',
    ],
});

class Tabbar extends Component<Props, State> {
    constructor(props: Props) {
        super(props);
        this.state = {
            tabbarlist: [
                { icon: "icon-shouye", title: "首页", to: "/index/home" },
                { icon: "icon-fenlei1", title: "分类", to: "/index/classification" },
                { icon: "icon-gouwuche1", title: "购物车", to: "/index/cateshopp" },
                { icon: "icon-wode", title: "我的", to: "/index/minecenter" }

            ],
            count: 0
        }
    }
    headerClick(i: number) {
        this.setState({ count: i }, () => {
            console.log(this.state.count);

        })
    }

    render() {
        return (
            <div className='tabbar'>
                {
                    this.state.tabbarlist.map((item, index) => {
                        return (
                            <Link className='bar' to={item.to} key={index}>
                            <div className={'tab ' + (this.state.count == index ? "active" : "")} key={index} onClick={() => { this.headerClick(index) }}>
                                <IconFont className="iconf" type={item.icon} />
                                <span >
                                    {item.title}
                                </span>
                            </div>
                            </Link>
                        )
                    })
                }
            </div>
        );
    }
}

export default withRouter(Tabbar);